<!--  -->
<template>
  <div class="padding-20 font-weight-700 whole-box flex-column">
    <div class="flex margin-bottom-20 justify-between align-center title-box">
      <span class="font-size-16 font-weight-700">租赁状况</span>
      <div class="flex">
        <div v-if="currentTab == 'commercialArea' || currentTab == 'commercialIncome'" class="margin-right-15" style="width: 150px">
          <el-select v-model="projectKey" size="mini" placeholder="请选择" clearable @change="getBusinessForm">
            <el-option v-for="item in projectOptions" :key="item.projectKey" :label="item.projectName" :value="item.projectKey"></el-option>
          </el-select>
        </div>
        <el-date-picker class="no-padding-right-box" style="width: 90px" :clearable="false" size="mini" v-model="searchDate" type="month" placeholder="选择月"> </el-date-picker>
      </div>
    </div>
    <div class="flex tab-box">
      <div class="tab cursor-pointer margin-right-10" :class="item.type == currentTab ? 'active' : 'no-active'" v-for="(item, index) in tabList" :key="index" @click="tabChange(item)">{{ item.lable }}</div>
    </div>
    <div class="flex-1">
      <table-space-ad v-if="currentTab == 'leaseSpace'" key="leaseSpace" ref="leaseSpace" pageType="leaseSpace"></table-space-ad>
      <table-space-ad v-if="currentTab == 'leasePlane'" key="leasePlane" ref="leasePlane" pageType="leasePlane"></table-space-ad>
      <table-space-ad v-if="currentTab == 'commercialIncome'" key="commercialIncome" ref="commercialIncome" pageType="commercialIncome"></table-space-ad>
    </div>
  </div>
</template>
<script>
  // group:集团视图
  import { apiViewbusinessForm, apiViewBlocLease } from '@a/about';
  import { projectList } from '@a/index';
  import { accMul } from '@/common/js/utils.js';
  import tableSpaceAd from './tableSpaceAd';

  export default {
    data() {
      return {
        searchDate: new Date().getTime() - 1000 * 60 * 60 * 24 * 31,
        currentTab: 'leaseSpace',
        projectKey: '',
        projectOptions: [],
        tabList: [
          {
            type: 'leaseSpace',
            lable: '空间出租率',
          },
          {
            type: 'leasePlane',
            lable: '广告位出租率',
          },
          {
            type: 'commercialIncome',
            lable: '收入占比',//业态占比(权责)
          },
        ],
      };
    },

    methods: {
      //出租率
      async getLease() {},

      //业态占比
      async getBusinessForm() {},

      //项目列表
      async getProjectList() {
        let res = await projectList({});
        this.projectOptions = res.rows || [];
        if (res.rows && res.rows.length > 0) {
          this.projectKey = res.rows[0].projectKey;
          if (this.projectKey) {
            this.getBusinessForm();
          }
        }
      },

      //tab切换
      tabChange(item) {
        this.currentTab = item.type;
      },
    },

    mounted() {
      this.getLease();
      this.getProjectList();
    },

    components: { tableSpaceAd },
  };
</script>
<style scoped lang="scss">
  .title-box {
    height: 28px;
  }
  .tab-box {
    margin-top: -17px;
    .tab {
      width: 106px;
      height: 38px;
      line-height: 38px;
      text-align: center;
    }
  }

  .active {
    background: rgba($color: #3384fe, $alpha: 0.1);
    border-radius: 3px;
    color: #3384fe;
  }
  .no-active {
    background: rgba($color: #d1cbcb, $alpha: 0.1);
    border-radius: 3px;
    color: #333;
  }
  .whole-box {
    height: 100%;
    background: #fff;
  }
  .no-padding-right-box {
    ::v-deep .el-input__inner {
      padding-right: 0;
    }
  }
</style>
